<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:q="http://huliqing.name/qfaces"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                template="/example/_template.xhtml" >
    <ui:define name="title">scroller</ui:define>
    <ui:define name="header">scroller组件示例</ui:define>
    <ui:define name="content">


        <h:form>
            完整高效的分页组件，如果看不到数据，请导入数据进行测试（最高122条记录）
            <q:scroller for="MDT"
                        listener="#{scrollerBean.loadData}"
                        var="person"
                        pageSize="5"
                        sortFields="name,age,email,birthday"
                        binding="#{scrollerBean.scroller}"
                        >
                <h:dataTable id="MDT"
                             binding="#{scrollerBean.uiPersons}"
                             style="border:1px solid #CCC;width:600px;"
                             rowClasses="row1,row2">
                    <h:column>
                        <f:facet name="header">
                            <h:outputText value="姓名" />
                        </f:facet>
                        <h:outputText value="#{person.name}" />
                    </h:column>
                    <h:column>
                        <f:facet name="header">
                            <h:outputText value="年龄" />
                        </f:facet>
                        <h:outputText value="#{person.age}" />
                    </h:column>
                    <h:column>
                        <f:facet name="header">
                            <h:outputText value="邮件" />
                        </f:facet>
                        <h:outputText value="#{person.email}" />
                    </h:column>
                    <h:column>
                        <f:facet name="header">
                            <h:outputText value="生日" />
                        </f:facet>
                        <h:outputText value="#{person.birthday}" >
                            <f:convertDateTime pattern="yyyy-MM-dd HH:mm:ss" timeZone="GMT+8" />
                        </h:outputText>
                    </h:column>
                    <h:column>
                        <f:facet name="header">
                            <h:outputText value="Edit" />
                        </f:facet>
                        <h:commandButton value="Delete" action="#{scrollerBean.delete}" />
                    </h:column>
                </h:dataTable>
            </q:scroller>
            <p />
            <h:commandButton value="换皮肤" action="#{scrollerBean.changeFace}" style="margin:0 10px;" />
            <h:commandButton value="换位置" action="#{scrollerBean.changePos}" style="margin:0 10px;" />
        </h:form>
        
        <h:form>
            <h:commandButton value="导入15条测试数据(随机)" action="#{scrollerBean.addTestRecords}" />
            <h:panelGroup id="myDataTablePanel1" binding="#{scrollerBean.uiPanel}" />
            <h:commandButton value="从后台生成列表,Testing..." action="#{scrollerBean.newGrid}" />

            <h:panelGroup id="myDataTablePanel2" binding="#{scrollerBean.uiPanel}" />
        </h:form>

    </ui:define>
    <ui:define name="description" >
		这是一个高效的分页组件
		特点：
		1.高效; 
		2.一次生命周期不会引起两次调用数据.
		3.刷新页面之后仍然在原始页面。
		4.支持数据库级排序
		5.使用非常简单。
    </ui:define>
    <ui:define name="htmlCode" >
        <h:outputText value="#{scrollerBean.htmlCode}" />
    </ui:define>
    <ui:define name="javaCode" >
        <h:outputText value="#{scrollerBean.javaCode}" />
    </ui:define>
</ui:composition>